﻿// JavaScript Document
//Init map
var map;
var infowindow;
var directionsDisplay;
var pointMarker;


//var stores = [];
//stores.push(new google.maps.LatLng(40.756, -73.986));
//stores.push(new google.maps.LatLng(37.775, -122.419));
//stores.push(new google.maps.LatLng(47.620, -122.347));
//stores.push(new google.maps.LatLng(-22.933, -43.184));
//37.09,-95.71
function initialize() {
    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        navigationControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        mapTypeIds: [
			google.maps.MapTypeId.ROADMAP,
			google.maps.MapTypeId.SATELLITE,
			google.maps.MapTypeId.TERRAIN,
			google.maps.MapTypeId.HYBRID
			]
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

    //Get stores from database and create marker for each store
    $.getJSON("place/getPlaces", function (data) {
        $.each(data, function (index, item) {
            var iconStore = new google.maps.MarkerImage('images/icon/'+ item.icon); 
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(item.latitude, item.longitude),
                map: map,
                icon: iconStore,
                title: 'Chi tiết'
            });

            (function (i, marker) {
                // Creating the event listener. It now has access to the values of 
                // i and marker as they were during its creation 
                google.maps.event.addListener(marker, 'click', function () {
                    createInfoWindow(item.id);
                });
            })(i, marker);    
        });
    });

    // Create a renderer for directions and bind it to the map.
    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
}

//Create div contain info of specify store
function createPlaceInfo(item) {
    var info = '<div id="info">'
                    + '<div style="float:left; width:180px; ">'
                        + '<span id="title">' + item.title + '</span><br/>'
                        + '<span id="info">' + item.address + '</span><br/>'
                        + '<span id="info">' + item.contactPhone + '</span><br/>'
                        + '<span id="info"><a target="blank" href="http://' + item.website + '">' + item.website + '</a></span>'
                    + '</div>'
                    + '<div style="float:right">'
        	            + '<img id="infoImg" src="images/storeImg/' + item.image + '"/>'
     	            + '</div>'
                    + '</div>';
    return info;
}

//Create infoWindow of store by id
function createInfoWindow(placeId) {

    $.getJSON("place/" + placeId, function (item) {
        //Add infowindow to map
        if (!infowindow)
            infowindow = new google.maps.InfoWindow();
        else
            infowindow.close();

        // Setting the content of the InfoWindow
        var info = createPlaceInfo(item);
        infowindow.setContent(info);
        infowindow.setPosition(new google.maps.LatLng(item.latitude, item.longitude));

        
//        if(!pointMarker){
//            pointMarker = new google.maps.Marker({
//                icon: new google.maps.MarkerImage('images/gplace.png'),
//                map: map
//          });
//        }


//        google.maps.event.addListener(pointMarker, 'click', function () {
//            infowindow.setContent(createPlaceInfo(item));
//            infowindow.open(map, pointMarker); // Opening the InfoWindow  
//        });


        //pointMarker.setPosition(new google.maps.LatLng(item.latitude, item.longitude));
        infowindow.open(map);
        map.panTo(new google.maps.LatLng(item.latitude, item.longitude));

    });
}

//Move to store when user click once in search result box
function moveToPlace(placeId) {
    createInfoWindow(placeId);
}


//get all city
function displayCities(){
    var currCity;
    if(window.location.hash)
        currCity =  window.location.hash.substring(1);
    else {
        currCity = 3; //Ho Chi Minh city is default
    }

    $.getJSON("city/getAll", function (data) {
        $("#city").selectbox("detach"); //detach ui of city combobox
        var line = "";
        $.each(data, function (index, item) {
            if(item.id == currCity)
                line = '<option value="' + item.id + '"' + ' selected="selected"' + '>' + item.name + '</option>';
            else
                line = '<option value="' + item.id + '"' + '>' + item.name + '</option>';
            $("#city").append(line);
        });
        
        $("#city").selectbox({
                classHolder: 'sbHolder_1',
                classHolderDisabled: 'sbHolderDisabled_1',
                classSelector: 'sbSelector_1',
                classOptions: 'sbOptions_1',
                classDisable: 'sbDisabled_1',
                classGroup: 'sbGroup_1',
                classSub: 'sbSub_1',
                classToggleOpen: 'sbToggleOpen_1',
                classToggle: 'sbToggle_1'
            });

        moveToCity(currCity);
        makeAutocomplete(currCity);

        $('#city').bind('change keyup', function () {
            //get value of selected option
            var tem = window.location.hash.substring(1);
            var value = $(this).children("option:selected").attr('value');
            window.location.hash = value;
            if(tem != value){
                moveToCity(value);
                reset();
                makeAutocomplete(value);
            }
        }).change();
    });
            
}

//move to city when user change city in combobox
function moveToCity(cityId){
     $.getJSON("city/" + cityId, function (item) {
        var latlng =  new google.maps.LatLng(item.latitude, item.longitude);
        map.setZoom(16);
        map.setCenter(latlng);
     });
}

//occur when change city
function reset(){
    if ($("#draggable").length > 0){ //check element if exists
        document.getElementById('draggable').style.visibility = "hidden"; //hidden search result box
        document.getElementById('restoreTab').style.visibility = "hidden";
    }
    $("#hasStartPoint").val("false"); //reset start point and end point of route
    $("#hasEndPoint").val("false")
}





    